<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <title>网点超停预警</title>
  <link rel="stylesheet" href="css/normalize.css" />
  <!-- font-awesome -->
  <link rel="stylesheet" href="css/font-awesome.css">
  <!-- layui-CSS -->
  <link rel="stylesheet" href="js/layui/css/layui.css">
  <!-- 页面主样式 -->
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/stylexu.css" />
  <style type="text/css">
    .layui-form-radio span {
      display: none;
    }

    .layui-form-radio i {
      margin-right: -20px;
    }

    #checkedAll {
      cursor: pointer;
    }

    table {
      border: none;
    }

    .layui-top-bd .layui-top-second .layui-input-inline {
      width: 200px;
    }

    #searchAlarm {
      width: 100%;
      height: 33px;
      border-radius: 37px;
      border-color: rgba(0, 51, 255, 1);
      border-width: 1px;
      background-color: rgba(255, 255, 255, 1);
      color: rgba(0, 51, 255, 1);
    }

    th {
      text-align: left;
      padding-left: 10px;
      padding-right: 10px;
      border-width: 0 0 1px;
      height: 46px;
      border: solid #ccc 0.5px;
    }

    td {
      text-align: left;
      padding-left: 10px;
      padding-right: 10px;
      border-width: 0 0 1px;
      height: 46px;
      border: solid #ccc 0.5px;
    }

    .sticky {
      background-color: white;
      position: sticky;
      z-index: 1;
      height: 46px;

      left: 0;
      text-align: left;
    }

    img {
      width: 100px;
      height: 100px;
    }
  </style>
  <link rel="stylesheet" href="css/alarm.css" />
</head>

<body>
  <div class="layui-layout layui-layout-admin">

    <div class="layui-side layui-bg-black">

      <div class="layui-side-scroll">

        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item">
            <a href="javascript:;"><i class="fa fa-vcard"></i><cite>会员管理</cite></a>
            <dl class="layui-nav-child">
              <dd>
                <a href="javascript:;">微信群发</a>
              </dd>
              <dd>
                <a href="javascript:;">文章管理</a>
              </dd>
              <dd>
                <a href="javascript:;">新建文章</a>
              </dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;"><i class="fa fa-anchor"></i><cite>车辆审核</cite></a>
            <dl class="layui-nav-child">
              <dd>
                <a href="javascript:;">经销商数据</a>
              </dd>
              <dd>
                <a href="javascript:;">全国平均数据</a>
              </dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;"><i class="fa fa-anchor"></i><cite>区域后台-统计管理</cite></a>
            <dl class="layui-nav-child">
              <dd>
                <a href="javascript:;" class="menu_three ">停车统计</a>
                <ol class="layui-nav-child " style="display: none;">
                  <li><a href="javascript:;"><cite></cite>停车日志</cite></a></li>
                  
                </ol>
              </dd>
            </dl>
           
          </li>
        </ul>
      </div>
    </div>



    <div class="layui-body layui-form">
      <div style="padding:20px;padding-top:0px;">
        <!-- 头 -->
        <div style="padding-bottom: 15px;">
          <div style="margin: 15px;">
            <span style="font-size: 20px;font-weight: 800;">网点超停预警</span>
          </div>
          <hr style="background-color: black; border: none; height: 1px;">
        </div>
        <!-- 查询 -->
        <div>
          <form class="layui-form" action="" method="post">
            <div style="font-size: 14px;">
              <div class="layui-input-inline" id="alarmForm" style="width: 16%;margin-right: 15px;">
                <select name="ruleStatus" id="chooseCity">
                  <option value="">--请选择城市--</option>
                  <option value="1">长春市</option>
                  <option value="0">北京市</option>
                </select>
              </div>
              <div class="layui-input-inline" style="width: 16%;margin-right: 15px;">
                <select name="ruleStatus" id="chooseWeb">
                  <option value="">--请选择网点--</option>
                  <option value="1">1</option>
                  <option value="0">2</option>
                </select>
              </div>
              <div class="layui-input-inline" style="width: 12%;margin-right: 15px;">
                <button type="button" id="searchAlarm">
                  <i class="layui-icon">&#xe615;</i>查询</button>
              </div>
            </div>
          </form>
        </div>
        <!-- 分块 -->

        <div class="layui-row layui-col-space15">
          <div class="layui-col-md3">
            <button class="space-button" id="spaceButton1">
              <div class="button-content">
                <div class="content-img">
                  <img src="./img/emptypic.png" alt="pic">
                </div>
                <div class="content-place">
                  <span>一汽大众销售公司停车场</span>
                </div>
                <div>
                  <div class="fake-button"><span>超停</span></div>
                  <div class="fake-button"><span>预警</span></div>
                </div>
                <div>
                  <div class="alarm-number"><span>3</span></div>
                  <div class="alarm-number"><span>1</span></div>
                </div>
              </div>
            </button>
          </div>

          <div class="layui-col-md3">
            <button class="space-button">
              <div class="button-content">
                <div class="content-img">

                </div>
                <div class="content-place">
                  <span>一汽大众销售公司停车场</span>
                </div>
                <div>
                  <div class="fake-button"><span>超停</span></div>
                  <div class="fake-button"><span>预警</span></div>
                </div>
                <div>
                  <div class="alarm-number"><span>3</span></div>
                  <div class="alarm-number"><span>1</span></div>
                </div>
              </div>
            </button>
          </div>

          <div class="layui-col-md3">
            <button class="space-button">
              <div class="button-content">
                <div class="content-img">

                </div>
                <div class="content-place">
                  <span>一汽大众销售公司停车场</span>
                </div>
                <div>
                  <div class="fake-button"><span>超停</span></div>
                  <div class="fake-button"><span>预警</span></div>
                </div>
                <div>
                  <div class="alarm-number"><span>3</span></div>
                  <div class="alarm-number"><span>1</span></div>
                </div>
              </div>
            </button>
          </div>

          <div class="layui-col-md3">
            <button class="space-button">
              <div class="button-content">
                <div class="content-img">

                </div>
                <div class="content-place">
                  <span>一汽大众销售公司停车场</span>
                </div>
                <div>
                  <div class="fake-button"><span>超停</span></div>
                  <div class="fake-button"><span>预警</span></div>
                </div>
                <div>
                  <div class="alarm-number"><span>3</span></div>
                  <div class="alarm-number"><span>1</span></div>
                </div>
              </div>
            </button>
          </div>

          <div class="layui-col-md3">
            <button class="space-button">
              <div class="button-content">
                <div class="content-img">

                </div>
                <div class="content-place">
                  <span>一汽大众销售公司停车场</span>
                </div>
                <div>
                  <div class="fake-button"><span>超停</span></div>
                  <div class="fake-button"><span>预警</span></div>
                </div>
                <div>
                  <div class="alarm-number"><span>3</span></div>
                  <div class="alarm-number"><span>1</span></div>
                </div>
              </div>
            </button>
          </div>
        </div>

      </div>
    </div>
    <!-- jQuery -->
    <script type="text/javascript" src="./js/jquery-3.1.1.min.js"></script>
    <!-- layui-JS -->
    <script type="text/javascript" src="./js/layui/layui.js"></script>
    <script type="text/javascript" src="./js/MobilityCarprice.js"></script>

    <script>
      layui.use(['table', 'element', 'form', 'layedit', 'laydate', 'laypage', 'layer', 'upload'], function () {
        var element = layui.element, $ = layui.jquery;
        $(".menu_three").on("click", function () {

          $(this).next().toggle();
          $.each($(this).parent().siblings(), function (i, e) {
            $(e).find("ol").hide();;
          });

        })
        $("ol").on("click", "li a", function () {
          $.each($(this).parent().siblings(), function (i, e) {
            $(e).find("a").removeClass('three_this')
          });
          $(this).addClass('three_this'); // 添加当前元素的样式
        })
        var form = layui.form,
          layer = layui.layer,
          layedit = layui.layedit,
          laydate = layui.laydate,
          form2 = layui.form,
          upload = layui.upload;
        var laypage = layui.laypage,
          layer = layui.layer;
        //显示分页
        var page_page = $("#page_page").val();
        var page_current = $("#page_current").val();
        var page_href = $("#page_href").val();
        var page_status = $("#status").val();
        var page_ruleName = $("#ruleName").val();

        laypage.render({
          elem: 'pageDemo',
          count: page_page,
          curr: page_current || 1, //当前页
          skip: true, //是否开启跳页
          skin: '#586683', //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
          theme: '#4B74FF',
          limit: 30,
          groups: 7, //连续显示分页数
          // 			layout: ['count', 'prev', 'page', 'next','skip'],
          layout: ['page'],
          jump: function (obj, first) {
            if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
              if (page_href.indexOf("?") > 0) {
                page_href += "&pageon=" + obj.curr + "&ruleStatus=" + page_status + "&ruleName=" + page_ruleName
              } else {
                page_href += "?pageon=" + obj.curr + "&ruleStatus=" + page_status + "&ruleName=" + page_ruleName
              }
              window.location.href = encodeURI(page_href);
            }
          }
        });


        //弹出表格
        var spaceButton1 = document.getElementById("spaceButton1");
        var table = layui.table;

        spaceButton1.onclick = function () {
          layer.open({
            type: 1,
            title: '一汽大众销售公司停车场',
            area: ['70%', '600px'],
            content: $("#openProductBox"),
            success: function () {
              table.render({
                data: [{ "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }, { "productName": "xxxx" }],
                elem: '#openProductTable',
                id: 'openProductTable',
                height: '500',
                cols: [
                  [{
                    field: 'productName', //字段名
                    title: '序号', //标题
                    width: 120,
                    sort: true,
                    fixed: 'left'
                  }, {
                    field: 'totalNumber', //字段名
                    title: '车牌号', //标题
                    width: 120,
                    sort: true,
                    fixed: 'left'

                  }, {
                    field: 'lastNumber', //字段名
                    title: '底盘号', //标题
                    width: 120,
                    templet: '#lastNumber',
                    sort: true
                  }, {
                    field: '',
                    title: '当前渠道',
                    width: 120,
                  }
                    , {
                    field: '',
                    title: '当前渠道',
                    width: 120,
                  }, {
                    field: '',
                    title: '入场时间',
                    width: 120,
                  }, {
                    field: '',
                    title: '预警类型',
                    width: 120,
                  }, {
                    field: '',
                    title: '预警值',
                    width: 120,
                  }, {
                    field: '',
                    title: '预警开始时间',
                    width: 120,
                  }
                    , {
                    field: '',
                    title: '入场订/工单号',
                    width: 120,
                  }
                  ]
                ]
              });

            },
          })
        }
      });
    </script>

</body>

<div id="openProductBox" style="display: none; padding: 10px;">
  <table id="openProductTable" lay-filter="openProductTable"></table>
</div>

<div id="popupContent" style="overflow: scroll;display: none;height: 100%;">
  <table id="tableid" style="table-layout: fixed;width: 1000px;">

  </table>
</div>

</html>